<template>
   <div class="line">
      <div id="line" style="width: 90%;height:320px;"></div>
  </div>  
</template>

<script>
 // 引入 echarts 主模块。
    import * as echarts from 'echarts/lib/echarts';
    // 引入折线图。
    import 'echarts/lib/chart/line';
    import 'echarts/lib/chart/bar';
    // 引入提示框组件、标题组件、工具箱组件。
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/toolbox';
     import 'echarts/lib/component/legend';
    import 'echarts/lib/component/markPoint';
    
export default {
  data() {
    return {
    };
  },
   mounted(){
          this.myChart=echarts.init(document.getElementById("line"))
          this.initData();
        },
        methods:{
           initData(){
              const 
          option = {
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '2015', '2016', '2017'],
                        ['Matcha Latte', 43.3, 85.8, 93.7],
                        ['Milk Tea', 83.1, 73.4, 55.1],
                        ['Cheese Cocoa', 86.4, 65.2, 82.5],
                        ['Walnut Brownie', 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(option);
           } 
        }
};

</script>

<style lang="scss" scoped>
.status {
  width: 100%;
  height: 320px;
  border: 1px solid white;
}
.rate {
  width: 100%;
  height: 180px;
  // background:red;
  .strip {
    display: flex;
    color: white;
    padding: 0 20px;
    font-size: 12px;
    box-sizing: border-box;
    align-items: center;
    > p:first-of-type {
      width: 50px;
    }
    > p:last-of-type {
      width: 70px;
    }
    > div {
      // width:100%;
      // height:auto;
      border: 1px solid #fa106d;
      flex: 1;
      height: 15px;
      margin: 0 5px;
      position: relative;
      box-sizing: border-box;
      border-radius: 0 5px 5px 0;

      > div {
        background: linear-gradient(to right, #121130 10%, #fa106d 60%);
        width: 90%;
        height: 15px;
        border-radius: 0 5px 5px 0;
        position: absolute;
        top: -1px;
        left: -1px;
      }
    }
  }
}

</style>